<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>供应</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-slide.css"/>
    <style>
        body {
            font-size: 13px;
            background: #f1f1f1;
        }

        header .pic img {
            width: 100%;
            margin-bottom: 10px;
        }

        .item {
            margin-bottom: 15px;
        }

        .item .aui-list-view.aui-grid-view {
            padding: 0;
        }

        .item .aui-list-view.aui-grid-view .aui-list-view-cell {
            padding: 0;
            margin-bottom: 3px;
            position: relative;
        }

        .item .aui-img-body {
            position: absolute;
            bottom: 0px;
            color: #fff;
            font-weight: bold;
            letter-spacing: 2px;
            padding: 6px 0 !important;
            right: 0;
            left: 0;
        }

        .item .aui-list-view.aui-grid-view .aui-list-view-cell:nth-of-type(3n+2) {
            margin: 0 .5%;
        }

        .item .aui-col-xs-4 {
            width: 33%;
        }

        .title {
            padding: 12px;
            font-size: 14px;
            border-left: 3px solid #327afa;
            background: #fff;
        }

        .aui-slide-page-active {
            background: #f5b5b0;
        }
    </style>
</head>
<body>
<header>
    <div class="pic">
        <img src="../image/gongying.jpg" alt="" id="categoryImage">
    </div>
</header><!-- /header -->
<div class="contain" id="Category-content">

</div>
<script id="Category-template" type="text/x-dot-template">
    {{for (var i in it){ }}
    <div class="item">
        <div class="title">
            {{=it[i].catname}}
        </div>
        <div class="ulSwipe swiper-container" id="aui-slide{{? i != 0}}{{=i}}{{?}}">
            <div class="swiper-wrapper aui-slide-wrap">
                {{for (var b in it[i].arr) { }}
                {{? (b + 3) % 3 == 0}}
                <ul class="aui-list-view aui-grid-view swiper-slide aui-slide-node">
                {{?}}
                    <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}},'{{=it[i].arr[b].catname}}')">
                        <img class="aui-img-object" src='{{=it[i].arr[b].image_src}}'>

                        <div class="aui-img-body">
                            {{=it[i].arr[b].catname}}
                        </div>
                    </li>
                {{? (b + 4) % 3 == 0}}
                </ul>
                {{?}}
                {{ } }}
            </div>
            <div class="swiper-pagination aui-slide-page-wrap"><!--分页容器--></div>
        </div>
    </div>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/aui-slide.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        Category();
        categoryImage();
    }
    //多个轮播也要写多个轮播
    function slide(i) {
        if (i == 0) {
            var sildes = 'slide';
            id = "aui-slide";
        } else {
            var sildes = 'slide' + i;
            id = "aui-slide" + i;
        }

        sildes = new auiSlide({
            container: document.getElementById(id),
            // "width":300,
            "height": 200,
            "speed": 300,
            "pageShow": true,
            "autoPlay": 5000,
            "pageStyle": 'dot',
            "loop": true,
            'dotPosition': 'center'
        })
    }
    function doSearch() {
        $api.addCls($api.dom(".aui-searchbar-wrap"), "focus");
        $api.dom('.aui-searchbar-input input').focus();
    }
    function cancelSearch() {
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"), "focus");
        $api.val($api.byId("search-input"), '');
        $api.dom('.aui-searchbar-input input').blur();
    }
    function clearInput() {
        $api.val($api.byId("search-input"), '');
    }
    function search() {
        var content = $api.val($api.byId("search-input"));
        if (content) {
            api.alert({
                title: '搜索提示',
                msg: '您输入的内容为：' + content
            });
        } else {
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        cancelSearch();
    }

    //商品推荐分类顶图
    function categoryImage() {
        var data = {
            'pid': '30'
        };
        var url = 'category/categoryImage';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                $('#categoryImage').attr('src', ret.msg);
            } else {
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //商品分类
    function Category() {
        showLoading();
        var data = {
            'moduleId': '5',
        };
        var url = 'category/supply';
        ajaxRequest(url, 'get', data, function (ret, err) {
            if (ret.status == 1) {
                var content = $api.byId('Category-content');
                var tpl = $api.byId('Category-template').text;
                var tempFn = doT.template(tpl);
                $api.html(content, '');
                $api.prepend(content, tempFn(ret.msg));
                for (var i = 0; i < ret.msg.length; i++) {
                    slide(i);

                }
                hideLoading();
                //图片延时加载
                echo.init({
                    offset: 0,
                    throttle: 250
                });
            } else {
                hideLoading();
                api.toast({
                    msg: ret.msg,
                    duration: 2000,
                    location: 'bottom'
                })
            }
        })
    }

    //打开商品列表
    function toCategoryList(catId,catName) {
        api.openWin({
            name: 'supplyList_win',
            url: 'supplyList_win.html',
            pageParam: {
                categoryId: catId,
                categoryName:catName
            },
            //delay: 300
        });
    }
</script>
</html>